<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>热词</title>
    <script src="../components/echarts-4.0.4.min.js"></script>
    <style>
        body,html{
            padding: 0;
            margin: 0;
            background:#0A0F23;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <div style="width: 100%;height: 100%;" id="turnover"></div>
</body>
<script>
    var turnover = echarts.init(document.getElementById('turnover'));

        var dataMap = {};

        dataMap.dataVisit = {
            //次数
            2013: [28, 30, 21, 39,32,40,34,12],
            2014: [15,16,41,44,45,46,41,13],
            2015: [23,30,35,41,34,35,38,15],
            2016: [17, 35, 38, 32, 21,34,35,15],
            2017: [23, 20, 27, 25, 27,32,35,19]
        };
        var datatitle = ["2013年全国区域内紧缺人才情况","2014年全国区域内紧缺人才情况","2015年全国区域内紧缺人才情况","2016年全国区域内紧缺人才情况","2017年全国区域内紧缺人才情况",]

        var barOption = {
            baseOption: {
                timeline: {
                    show: false,
                    axisType: 'category',
                    loop: true,
                    autoPlay: true,
                    playInterval: 1000,
                    label: {
                        normal: {
                            textStyle: {
                                color: '#fff',
                                fontSize: 16
                            }
                        },
                        position: 14
                    },
                    lineStyle: {
                        color: '#fff'
                    },
                    controlStyle: {
                        show: false
                    },
                    top: 0,
                    data: [
                       '2011','2012', '2013','2014','2015'
                    ]
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                      type: 'shadow',
                    }
                  },
                 grid: {
                    left: '5%',
                    right: '5%',
                    bottom: '10%',
                    top:'25%',
                    height: '69%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        axisLine: {
                            lineStyle: {
                                color: '#fff'
                            }
                        },
                        axisTick: {
                            lineStyle: {
                                color: '#fff'
                            }
                        },
                        axisLabel: {
                            interval: 0,
                            textStyle: {
                                color: '#fff',
                                fontSize:16
                            }
                        },
                        splitLine: {
                            show: false
                        },
                        data: ['华东', '华南','华中','华北','西北','西南','东北','港澳台'],
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        min: 0,
                        max: 50,
                          nameTextStyle: {
                            "color": "#AEA4A8",
                             verticalAlign:'bottom'
                          },
                        //interval: 10,
                        axisLine: {
                            lineStyle: {
                                color: '#fff'
                            }
                        },
                        axisTick: {
                            lineStyle: {
                                color: '#fff'
                            }
                        },
                        axisLabel: {
                            interval: 0,
                            textStyle: {
                                color: '#fff',
                                fontSize:16
                            }
                        },
                        splitLine: {
                            show: true
                        }
                    }

                ],
                series: [
                    {name: '次数', type: 'bar',barWidth: '50'}
                ]
            },
            options: [
                {

                    title: {
                        text: datatitle[0],
                        left: 'center',
                        top:"7%",
                        textStyle: {
                            color: '#fff',
                            fontSize: 22
                        }
                    },
                    series: [
                        {
                            data: dataMap.dataVisit['2013'],
                            type: 'bar',
                            itemStyle: {
                                normal: {
                                    color: '#297bcd',
                                    fontSize:16
                                }
                            }
                        }
                    ]
                },
                {
                    title: {
                        text: datatitle[1],
                        left: 'center',
                        textStyle: {
                            color: '#fff',
                            fontSize: 22
                        }
                    },
                    series: [
                        {
                            data: dataMap.dataVisit['2014'],
                            type: 'bar',
                            itemStyle: {
                                normal: {
                                    color: '#297bcd',
                                    fontSize:16
                                }
                            }
                        }
                    ]
                },
                {
                    title: {
                        text: datatitle[2],
                        left: 'center',
                        textStyle: {
                            color: '#fff',
                            fontSize: 22
                        }
                    },
                    series: [
                        {
                            data: dataMap.dataVisit['2015'],
                            type: 'bar',
                            itemStyle: {
                                normal: {
                                    color: '#297bcd',
                                    fontSize:16
                                }
                            }
                        }
                    ]
                },
                {
                    title: {
                        text: datatitle[3],
                        left: 'center',
                        textStyle: {
                            color: '#fff',
                            fontSize: 22
                        }
                    },
                    series : [
                        {
                            data: dataMap.dataVisit['2016'],
                            type: 'bar',
                            itemStyle: {
                                normal: {
                                    color: '#297bcd',
                                    fontSize:16
                                }
                            }
                        }
                    ]
                },
                {
                    title: {
                        text: datatitle[4],
                        left: 'center',
                        textStyle: {
                            color: '#fff',
                            fontSize: 22
                        }
                    },
                    series : [
                        {
                            data: dataMap.dataVisit['2017'],
                            type: 'bar',
                            itemStyle: {
                                normal: {
                                    color: '#297bcd',
                                    fontSize:16
                                }
                            }
                        }
                    ]
                }
            ]
        };

        turnover.setOption(barOption);
</script>
</html>